<template>
    <el-card class="mb-4">
        <ul>
            <li v-for="i in 3" :key="i">
                {{ `前区+后区选号池过滤${i}：${poolListCounter[`front${i}len`]} + ${poolListCounter[`back${i}len`]}` }}
                <span class="ms-2">{{ poolList[`front${i}`].join(', ') + ' + ' + poolList[`back${i}`].join(', ')
                }}</span>
            </li>
            <li v-for="i in 3" :key="i">7列选号池过滤{{ i }}：
                <span v-for="i2 in 7" :key="i2" class="me-1">
                    {{ poolListCounter[`col${i2 - 1}${i}len`] }}
                </span>
                <el-tooltip placement="bottom">
                    <template #content>
                        <strong>7列选号池过滤{{ i }}</strong>
                        <div v-for="i2 in 7" :key="i2" class="me-1">
                            {{ i2 + '：' + poolList[`col${i2 - 1}${i}`].join(', ') }}
                        </div>
                    </template>
                    详情
                </el-tooltip>
            </li>
        </ul>
        <div>说明：【7列选号池过滤2】和【前区+后区选号池过滤3】是最优方案。</div>
    </el-card>
    <el-card v-for="(item, idx) in dataset" :key="idx" class="mb-4">
        <ul>
            <li>期号：{{ item.lotteryDrawNum }}</li>
            <li>开奖结果：{{ item.lotteryDrawResult }}</li>
            <li v-for="i in 3" :key="i">
                {{ `前区+后区选号池过滤${i}：${item.stat[`FrontAndBack_LV${i}`][0]} + ${item.stat[`FrontAndBack_LV${i}`][1]}` }}
                （{{ item.stat[`FrontAndBack_LV${i}`][0] + item.stat[`FrontAndBack_LV${i}`][1] }}）
            </li>
            <li v-for="i in 3" :key="i">7列选号池过滤{{ i }}：
                {{ item.stat[`COL_LV${i}`][0].join(', ') + ' + ' + item.stat[`COL_LV${i}`][1].join(', ') }}
                （{{item.stat[`COL_LV${i}_COUNT`][0] + ' + ' +
                    item.stat[`COL_LV${i}_COUNT`][1] + ' = ' + (item.stat[`COL_LV${i}_COUNT`][0]+item.stat[`COL_LV${i}_COUNT`][1])  }}）
                    <el-tooltip placement="bottom">
                    <template #content>
                        <strong>7列选号池过滤{{ i }}</strong>
                        <div v-for="i2 in 7" :key="i2" class="me-1">
                            {{ i2 + '：' + renderColor(poolList[`col${i2 - 1}${i}`], item.lotteryDrawResult).join(', ') }}
                        </div>
                    </template>
                    详情
                </el-tooltip>
            </li>
        </ul>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import DltDataModel from '@/model/DltDataModel';

import ObjectUtils from "@/utils/ObjectUtils";
import { split_index } from '@/config/dlt-config';

let dltDataModel = new DltDataModel();
const dataset = ref([...dltDataModel.getDataSource()]);
const statDrawal = dltDataModel.getDrawalStat();

const poolList = ref({});
const poolListCounter = ref({})
for (let poolLevel = 1; poolLevel <= 3; poolLevel++) {
    poolList.value['front' + poolLevel] = ObjectUtils.statObjectToArr(statDrawal.statAll[0], false, { op: '>', value: poolLevel }).map(v => v.slice(-2));
    poolList.value['back' + poolLevel] = ObjectUtils.statObjectToArr(statDrawal.statAll[1], false, { op: '>', value: poolLevel }).map(v => v.slice(-2));
    for (let i = 0; i < 7; i++) {
        poolList.value['col' + i + poolLevel] = ObjectUtils.statObjectToArr(statDrawal.statColumns[i], false, { op: '>', value: poolLevel }).map(v => v.slice(-2));
    }
}
for (let poolLevel = 1; poolLevel <= 3; poolLevel++) {
    poolListCounter.value[`front${poolLevel}len`] = ('0' + poolList.value['front' + poolLevel].length).slice(-2);
    poolListCounter.value[`back${poolLevel}len`] = ('0' + poolList.value['back' + poolLevel].length).slice(-2);
    for (let i = 0; i < 7; i++) {
        poolListCounter.value[`col${i}${poolLevel}len`] = ('0' + poolList.value['col' + i + poolLevel].length).slice(-2);
    }
}
let arrTemp = [], orderArr = [], pos = 0, name = '';
dataset.value.forEach(item => {
    arrTemp = item.lotteryDrawResult.split(' ');
    orderArr = [arrTemp.slice(0, split_index), arrTemp.slice(split_index)];
    item['stat'] = {};
    for (let poolLevel = 1; poolLevel <= 3; poolLevel++) {
        item['stat']['FrontAndBack_LV' + poolLevel] = [
            orderArr[0].filter(v => poolList.value['front' + poolLevel].includes(v)).length,
            orderArr[1].filter(v => poolList.value['back' + poolLevel].includes(v)).length
        ];
        name = 'COL_LV' + poolLevel;
        item['stat'][name] = [[], []];
        arrTemp.forEach((num, i) => {
            pos = i < split_index ? 0 : 1;
            item['stat'][name][pos].push(poolList.value['col' + i + poolLevel].includes(num) ? 1 : 0);
        })
    }
    for (let poolLevel = 1; poolLevel <= 3; poolLevel++) {
        item['stat']['COL_LV' + poolLevel+'_COUNT'] = [
            item['stat']['COL_LV' + poolLevel][0].filter(v => v == 1).length,
            item['stat']['COL_LV' + poolLevel][1].filter(v => v == 1).length
        ];
    }
})

const renderColor = (arr, resultStr)=>{
    
}
</script>